<template>
  <div v-if="listData && listData.length > 0" style="width:inherit">
    <a-table
      :scroll="{ x: 1000, y: 550 }"
      :columns="ucolumns"
      :data-source="listData"
      :pagination="upagination"
      :loading="loading"
      rowKey="id"
      @change="tableChange"
      size="middle"
      :rowClassName="rowClassName"
      style="width:100%"
    >
      <div slot="serial" slot-scope="text, record, index" class="overBox">
        {{ (upagination.current - 1) * upagination.pageSize + parseInt(index) + 1 }}
      </div>

      <div slot="typeSlot" slot-scope="type" class="beyond_hiding" style="width: 100%">
        <a-tooltip placement="topLeft">
          <template slot="title">
            <span>{{ typeLable(type) }}</span>
          </template>
            {{ typeLable(type) }}
        </a-tooltip>
      </div>

      <div slot="statusSlot" slot-scope="status" class="beyond_hiding" style="width: 100%">
        <a-tooltip placement="topLeft">
          <template slot="title">
            <span>{{ statusLable(status) }}</span>
          </template>
            {{ statusLable(status) }}
        </a-tooltip>
      </div>
      
      <div slot="sourceSlot" slot-scope="source" class="beyond_hiding" style="width: 100%">
        <a-tooltip placement="topLeft">
          <template slot="title">
            <span>{{ sourceLable(source) }}</span>
          </template>
            {{ sourceLable(source) }}
        </a-tooltip>
      </div>

      <div slot="titleSlot" slot-scope="title" class="beyond_hiding" style="width: 100%;text-align: left;">
        <a-tooltip placement="topLeft">
          <template slot="title">
            <span>{{ title }}</span>
          </template>
            {{ title }}
        </a-tooltip>
      </div>

      <div slot="pubcodeSlot" slot-scope="pubcode" class="beyond_hiding" style="width: 100%">
        <a-tooltip placement="topLeft">
          <template slot="title">
            <span>{{ pubcode }}</span>
          </template>
            {{ pubcode }}
        </a-tooltip>
      </div>

      <div slot="operation" slot-scope="text, record" class="overBox">
        <template>
          <a @click="lawDetail(record)">详情</a>
        </template>
      </div>
    </a-table>
  </div>
  <a-empty v-else>
    <div slot="image">
      <img class="empty_div_img" src="@/assets/images/law/legalNoSearch.png" alt="" />
    </div> 
    <span slot="description" class="empty_div_text"> 暂无搜索结果 </span>
  </a-empty>
</template>

<script>
import { getAllPubunitList } from '@/api/law/law_pubunit'
import { searchDocByKeyword } from '@/api/law/law_doc'
import { Tp_lawList } from  '@/enumeration/Tp_law'
import { Tp_lawsrcList } from  '@/enumeration/Tp_lawsrc'
import { St_lawList } from  '@/enumeration/St_law'
export default {
  props: {
    searchForm: {
      // 查询条件
      type: Object,
      required: true
    }
  },
  data() {
    return {
      collapseKey: [], // 折叠面板key
      ucolumns: [
        {
          title: '序号',
          width: 50,
          key: 'index',
          align: 'center',
          fixed: 'left',
          scopedSlots: { customRender: 'serial' }
        },
        {
          title: '名称',
          dataIndex: 'title',
          key: 'title',
          width: 150,
          align: 'center',
          scopedSlots: { customRender: 'titleSlot' }
        },
        {
          title: '法律性质',
          dataIndex: 'type',
          key: 'type',
          width: 100,
          align: 'center',
          scopedSlots: { customRender: 'typeSlot' }
        },
        {
          title: '发布机关',
          dataIndex: 'pubunitname',
          key: 'pubunitname',
          width: 130,
          align: 'center'
        },
        {
          title: '发布日期',
          dataIndex: 'pubdate',
          key: 'pubdate',
          width: 120,
          align: 'center'
        },
        {
          title: '施行日期',
          dataIndex: 'execdate',
          key: 'execdate',
          width: 120,
          align: 'center'
        },
        {
          title: '有效性',
          dataIndex: 'status',
          key: 'status',
          width: 120,
          align: 'center',
          scopedSlots: { customRender: 'statusSlot' }
        },
        {
          title: '失效日期',
          width: 120,
          key: 'losedate',
          dataIndex: 'losedate',
          align: 'center'
        },
        {
          title: '发布文号',
          width: 150,
          key: 'pubcode',
          dataIndex: 'pubcode',
          align: 'center',
          scopedSlots: { customRender: 'pubcodeSlot' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          width: 100,
          fixed: 'right',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      listData: [],
      cloneListData: [],
      queryParam: {}, // 查询条件
      upagination: {
        // 表格分页参数
        defaultPageSize: 20,
        total: 0,
        current: 1,
        pageSize: 20,
        showTotal: (total) => `共${total}条数据`,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100'],
      },
      ubordered: true, // 表格边框是否显示
      unitList: [], // 发布机关查询数据
      Tp_lawList: Tp_lawList, // 法律性质
      Tp_lawsrcList: Tp_lawsrcList, // 来源途径
      St_lawList: St_lawList, // 法律有效性
      isShowDetail: false, // 展示详情
    }
  },
  watch: {
    searchForm: {
      // value 需要深度监听及默认先执行handler函数
      handler(val) {
        this.queryParam =  JSON.parse(JSON.stringify(val))
      },
      immediate: true,
      deep: true
    }
  },
  computed: {
    
  },
  created() {
    this.queryUnitList(); //查询发布机关数据
  },
  updated() {},
  methods: {
    // 查询全部的发布机关
    async queryUnitList() {
      await getAllPubunitList().then((res) => {
        // console.log('查询参数', params)
        if (res.code == 0 && res.data) {
          this.unitList = res.data
        } else {
          this.unitList = [];
        }
      })
    },
    tableChange(upagination, filters, sorter, { currentDataSource }) {
      this.row_idx = upagination.current * upagination.pageSize - upagination.pageSize
      this.queryParam.pageNumber = upagination.current
      this.queryParam.pageSize = upagination.pageSize
      this.queryDocList()
    },
    /**
     * 法律性质显示转换
     */
     typeLable(val) {
      for (let key in this.Tp_lawList) {
        if (this.Tp_lawList[key].value == val) {
          return this.Tp_lawList[key].name;
        }
      }
      return val
    },
    /**
     * 有效性显示转换
     */
    statusLable(val) {
      for (let key in this.St_lawList) {
        if (this.St_lawList[key].value == val) {
          return this.St_lawList[key].name;
        }
      }
      return val
    },
    /**
     * 来源途径显示转换
     */
    sourceLable(val) {
      for (let key in this.Tp_lawsrcList) {
        if (this.Tp_lawsrcList[key].value == val) {
          return this.Tp_lawsrcList[key].name;
        }
      }
      return val
    },
    // 关键字查询法律
    async queryDocList() {
      this.loading = true
      await searchDocByKeyword(this.queryParam)
        .then((res) => {
          this.loading = false
          if (res.code !== 0) {
            this.$message.error('获取数据失败')
          } else {
            this.listData = res.data.records
            this.cloneListData = JSON.parse(JSON.stringify(this.listData))
            this.upagination.total = res.data.total
            this.upagination.current = res.data.current
            this.upagination.pageSize = res.data.size
          }
        }).catch((err) => {
          this.listData = []
          console.log(err, '获取数据失败')
        }).finally(() => {
          this.loading = false
        })
    },

    rowClassName(record, index) {
      return index % 2 === 0 ? 'oddRow' : 'evenRow'
    },
    // 详情展示
    lawDetail(record) {
      this.$emit('showDocDetali', record);
    },

  }

}
</script>

<style lang="scss" scoped>

.overBox {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 45px; /* 你可以将 50px 替换为你希望的固定高度 */
  overflow: hidden; /* 避免内容溢出 */
  white-space: nowrap; /* 防止换行 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

  .empty_div_img {
    width:240px;
    height: 180px;
  }
  .empty_div_text {
    margin-top: 80px;
    font-size: 18px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: #2C2C2C;
  }
  ::v-deep .ant-empty-image  {
    height: auto;
  }

</style>